<template>
  <div class="article_box" >
    <h2 @click="$emit('getTitle',obj)"><span class="code">{{change()}}</span>{{ obj.title }}</h2>
    <p>{{ obj.content }}</p>
    <div v-if="obj.children">
      <article-template
        v-for="(item, i) in obj.children"
        :key="i"
        :obj="item"
        :index="i"
        :prefix="prefix+Number(index+1)+'.'"
      >
      </article-template>
    </div>
  </div>
</template>

<script>
import articleTemplate from "@/views/wordModel/components/articleTemplate.vue";
export default {
  name:"articelTem",
  emit:["getTitle"],
  components: {
    articleTemplate,
  },
  props: ["obj", "prefix", "index"],
  data(){
      return{
          changeCode:"ABCDEFGHIGKLMNOPQRSTUVWSYZ",
      }
  },
  created(){
    // console.log(this.$options.name)
    // console.log(this.$attrs)
  },
  methods:{
      change(){
          let prefix = `${this.prefix}${this.index+1}.`;
          if(this.obj.children||!this.prefix){
              return prefix;
          }else{
              return `(${this.changeCode.substring(this.index,this.index+1).toLowerCase()})`
          }
      }
  }
};
</script>

<style>
.article_box {
  text-align: left;
}
.article_box p {
  text-indent: 2em;
}
.code{
    margin-right:10px;
}
</style>